<template>
  <MenuLayout>
    <template #content>
      <div>
        <div class="row-spaceb mg15" style="align-items: center">
          <p class="fwbold fs-md">· 服务商品兑付详情</p>
          <el-button type="danger" size="mini" plain @click="$router.back()">返 回</el-button>
        </div>
        <el-divider></el-divider>
        <div class="card">
          <!--          时间线-->
          <el-steps :active="2" class="mg30 ml80 mr80" align-center>
            <el-step :title="item.title" v-for="(item, index) in activities" :key="index">
              <template #icon>
                <p>{{ index + 1 }}</p>
              </template>
            </el-step>
          </el-steps>
          <!--          订单信息-->
          <div class="mt40 mb40">
            <div class="mg20 fs-md fwbold">订单信息</div>
            <el-table size="medium" :data="orderList" border
                      :header-cell-style="{background:'rgb(252, 241, 231)',color:'#606266'}">
              <el-table-column prop="no" label="订单编号"></el-table-column>
              <el-table-column prop="name" label="服务产品名称"></el-table-column>
              <el-table-column prop="department" label="服务企业"></el-table-column>
              <el-table-column prop="serviceTime" label="服务完成时间"></el-table-column>
              <el-table-column prop="amount" label="合同金额(元)"></el-table-column>
              <el-table-column prop="bidamount" label="拟兑付金额(元)"></el-table-column>
              <el-table-column label="服务状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.state == 1">已完成</span>
                </template>
              </el-table-column>
              <el-table-column label="服务评价">
                <template slot-scope="scope">
                  <el-button type="text" class="color-blue3 fs-md" v-if="scope.row.state == 1">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--          补贴兑付申请表单-->
          <div class="mb20 fwbold fs-md center">2024年服务补贴申请表单</div>
          <div class="pr10 tr fs-sm mb20">扩展名：pdf、png、jpg、xls、xlsx、doc、docx。单个文件50M以内</div>
          <el-table size="medium" :data="formList" border stripe
                    :header-cell-style="{background:'rgb(252, 241, 231)',color:'#606266'}">
            <el-table-column prop="no" label="序号" width="60px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="所需材料"></el-table-column>
            <el-table-column label="操作" width="120px" align="center">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.state == 1">点击查看</el-button>
                <el-button type="text" v-if="scope.row.state == 0">点击上传</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="mg20">
        <div class="row-start" style="margin-left: 110px;">
          <p class="fs-md pl20"><i class="el-icon-warning color-red mr10"></i>服务补贴总额度剩余：<span
              class="color-red fwbold">3247万元</span></p>
          <p class="fs-md ml50">该商家已上架服务产品：<span class="color-red fwbold">8个</span>，计划补贴金额已分配<span
              class="color-red fwbold">323.19万元</span>,还可以对该商家分配补贴<span
              class="color-red fwbold">176.81万元</span></p>
        </div>
        <el-form class="mt20 width-20" label-width="210px" ref="subsidiesDataForm" :rules="servicesSubsidiesDataRules"
                 :model="servicesSubsidiesData" label-position="right" label-suffix=":" size="medium">
          <el-form-item label="服务产品补贴比例" prop="ratio">
            <el-select placeholder="-请选择-" class="width-10" v-model="servicesSubsidiesData.ratio"></el-select>
          </el-form-item>
          <el-form-item label="同意兑付金额" prop="bidAmt">
            <el-input v-model="servicesSubsidiesData.bidAmt" placeholder="请输入同意兑付金额" type="number" class="width-10">
              <template slot="append"><span>元</span></template>
            </el-input>
          </el-form-item>
          <el-form-item label="审核结果" prop="result">
            <el-radio-group v-model="servicesSubsidiesData.result">
              <el-radio :label="2">审核通过</el-radio>
              <el-radio :label="1">退回修改</el-radio>
              <el-radio :label="0">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核意见">
            <el-input type="textarea" class="width-10" v-model="servicesSubsidiesData.remark"
                      :autosize="{minRows: 3, maxRows: 6}"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="center width-20 mt20 mb20">
        <el-button type="danger">提 交</el-button>
      </div>
    </template>
  </MenuLayout>
</template>
<script>
import MenuLayout from '@/components/MenuLayout'
import TimeLine from "@/components/timeLine.vue";

export default {
  data() {
    return {
      activeIndex: '1',
      activities: [
        {
          title: '服务商申请',
          done: true,
        },
        {
          title: '等待审核',
          done: false,
        },
        {
          title: '申请成功',
          done: false,
        }
      ],
      orderList: [
        {
          no: "FWQ212523",
          name: '小微企业智慧产销管理系统',
          department: '广西中小企业1',
          serviceTime: '2024-08-05 12:00:00',
          amount: '14000',
          bidamount: '6000',
          state: 1
        }
      ],
      formList: [
        {name: '服务合同', state: 1},
        {name: '支付凭证', state: 0}
      ],
      servicesSubsidiesData: {},
      servicesSubsidiesDataRules: {
        ratio: [{required: true, message: '服务产品补贴比例不能为空', trigger: 'change'}],
        bidAmt: [{required: true, message: '同意兑付金额不能为空', trigger: 'change'}],
        result: [{required: true, message: '审核结果不能为空', trigger: 'change'}],
      }
    }
  },
  components: {
    TimeLine,
    MenuLayout
  }
}
</script>
<style scoped lang="scss">
p {
  padding: 0;
}

:deep .el-divider--horizontal {
  margin: 12px 0;
}

:deep(.el-step__title.is-finish) {
  color: #FF0000;
}

:deep(.el-step__head.is-finish) {
  color: #FF0000;
  border-color: #FF0000;
}

:deep(.el-step__line-inner) {
  border-style: dashed;
}

:deep(.el-step__title.is-process) {
  font-weight: 400;
  color: rgb(122, 121, 121);
}

:deep(.el-step__title.is-wait) {
  color: rgb(122, 121, 121);
}

/deep/ .el-radio.is-checked .el-radio__inner {
  border-color: #D32521;
  background-color: #D32521;
  color: #D32521;
}

/deep/ .el-radio.is-checked .el-radio__label {
  color: #D32521;
}
</style>
